<template>
    <div class="top" :style="{backgroundImage:'url('+require('@/assets/image55.png')+')',backgroundSize:'cover',backgroundPosition:'center'}">
     <div class="toptop">
        <svg class="icon" aria-hidden="true" @click="gotoback">
          <use xlink:href="#icon-xiangzuojiantou"></use>
    </svg>
    <span>中级陪护-订单详情</span>
     </div>
     <div class="orderbox">
     <div class="orderlist">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gouxuan"></use>
    </svg>
    <span>填写订单</span>
     </div>
     <div class="orderlist">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-redyuanyuan"></use>
    </svg>
    <span>在线支付</span>
     </div>
     <div class="orderlist">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-redyuanyuan"></use>
    </svg>
    <span>专人服务</span>
     </div>
     <div class="orderlist">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-redyuanyuan"></use>
    </svg>
    <span>服务完成</span>
     </div>
    </div>
    </div>
    <div class="serveinfo">
        <div class="serveitem">
        <span class="important">*</span><span>服务医院</span>
        <select name="" id="selectitem">
            <option value="">请选择医院</option>
            <option value="">贵州省人民医院</option>
            <option value="">贵医附院</option>
            <option value="">花溪区人民人==医院</option>
        </select>
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>院内床位号</span>
        <select name="" id="selectitem">
            <option value="">请选择科室</option>
            <option value="">内科</option>
            <option value="">儿科</option>
            <option value="">消化科</option>
            <option value="">妇产科</option>
        </select>
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>选择护工</span>
        <select name="" id="selectitem">
            <option value="">请选择护工</option>
            <option value="">1号</option>
            <option value="">2号</option>
            <option value="">3号</option>
        </select>
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>联系人</span>
        
        <input type="text" class="inputpeople" placeholder="请填写就诊人姓名">
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>被陪护人姓名</span>
        
        <input type="text" class="inputpeople" placeholder="请填写姓名">
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>联系电话</span>
       
        <input type="number" class="inputpeople" placeholder="请填写联系电话">
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>开始日期</span>
      
        <input type="date" class="selectdata">
        <input type="time" class="selestime">
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>结束日期</span>
      
        <input type="date" class="selectdata">
        <input type="time" class="selestime">
    </div>
        <div class="serveitem">
        <span class="important">*</span><span>服务天数</span>
        <div class="countday">
        <button @click="subtractDay">-</button>
        <span>{{ message }}</span>
        <button @click="addDay">+</button>
    </div>
    </div>
    </div>
    <div class="tips">
        <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-warning"></use>
</svg>
<span>额外服务费用客服会与你确认，本订单费用不包括额外服务费用</span>
    </div>
    <div class="selectinfo">
        <input type="checkbox" name="" id="info" >
        <span>我已阅读并同意《金优陪协议和隐私政策》</span>
    </div>
    <div class="footer">
        <div class="footerleft">
            <div class="money">预付金额</div>
            <div class="countmoney">00.00￥</div>
        </div>
        <div class="footerright">立即下单</div>

    </div>
</template>
<script>
  export default{
    data(){
        return{
            count:1,
        };
    },
    computed:{
        message(){
         return this.count;
        }
    },
    methods:{
        addDay(){
           this.count++
        },
        subtractDay(){
            if(this.count>1){
                this.count--;
            }
        },
        gotoback(){
            this.$router.go(-1)
        }

    }
  }
</script>
<style scoped>
.top{
    position: relative;
    width: 7.88rem;
    height: 5.12rem;
    
}
.toptop{
    padding-top: 50px;
    padding-left: 20px;
}
.toptop span{
    display: inline-block;
    text-align: center;
    line-height: 53px;
    border-radius: 20px/20px;
    width: 266px;
    height: 53px;
    background-image: linear-gradient(to right,rgb(165,214,63),rgb(67,207,124));
    margin-left: 50px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
   
}
.orderbox{
    margin-top: 100px;
    padding-left: 30px;
    display: flex;
    width: 7.94rem;
    height: 1.54rem;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
}
.orderlist{
   justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
}
.orderlist span{
    margin-top: 15px;
    font-size: 16px;
    color: #fff;
}
.serveinfo{

    margin-top: 25px;
    width: 367px;
    height: 370px;
     box-shadow: 0 0 10px #888;
     margin-left: 30px;
     border-radius: 5px;
}
.serveitem{
    position: relative;
    display: flex;
    align-items: center;
   border-bottom: 1px solid gray;
    width: 367px;
    height: 40px;
   
   
}
.important{
    color: red;
    margin-left: 10px;
}
#selectitem{
    border: 0;
    position: absolute;
    right: 0;
    width: 200px;
    height: 38px;
  

}
.inputpeople{
    width: 200px;
    height: 38px;
    border: none;
    margin-left: 60px;
}
.selectdata{
    width: 150px;
    height: 38px;
    border: none;
    margin-left: 20px;
}
.selestime{
    width: 100px;
    height: 38px;
    border: none;
}
.countday{
    margin-left: 50px;
}
button{
    width: 30px;
    margin: 10px;
}
.servearea{
    position: relative;
    display: flex;

}
.tips{
    width:369px ;
   margin-top: 5px;
    margin-left: 30px;
}
.tips span{
    font-size: 12px;
    color:#A6A6A6 ;
}
.selectinfo{
    margin-left: 70px;
    margin-top: 5px;
    font-size: 12px;
    color:#29C1E3 ;
}
#info{
    margin-right: 5px;
    border: 1px solid #29C1E3;
}
.footer{
    display: flex;
}
.money{
    width: 90px;
    height: 35px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 20px/20px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-weight: bold;
}
.countmoney{
    color:#00BAAD ;
}
.footerleft{
    margin-top: 105px;
    margin-left: 30px;
}
.footerright{
    margin-top: 105px;
    margin-left: 90px;
    width: 145px;
    height: 44px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 30px/30px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}
</style>